<template>
  <div class="container">
    <div v-masonry transition-duration="0.3s" :gutter="10">
      <div v-masonry-tile v-for="(item, index) in photoList">
        <img :src="item.url2" @click="jumpToPhoto(item)">
      </div>
    </div>
  </div>
</template>

<script>
import { listPhoto } from "@/api/photo";
import usePhotoStore from '@/store/modules/photo';

export default {
  name: "PhotoView",
  components:{

  },
  data(){
    return {
      align: 'center',
      photoList:[],
    }
  },
  created(){
    listPhoto().then(response =>{
      this.photoList = response.data.rows;
      console.log( this.photoList );
    });
  },
  methods:{
    jumpToPhoto:function (photo){
      const photoStore = usePhotoStore();
      photoStore.url1 = photo.url1;
      photoStore.url2 = photo.url2;
      photoStore.title = photo.title;
      photoStore.description = photo.description;
      this.$router.push({
        path:'/photoDetail',
      })
    }
  }


}
</script>

<style scoped>
.container{
  max-width: 1024px;
  width: 100%;
  min-height: 700px;

  padding: 30px 0;
  margin: 10px auto;

  flex-grow: 1;
}


</style>
